<template>
	<view>
		<u-navbar :is-back="false" :height="height" :border-bottom="false" :background="background" title=" ">
			<view class="slot-wrap">
				<view>
					<view class="title n-flex-row n-justify-between n-align-center">
						<view>
							<view class="tit">商城</view>
							<view class="text n-flex-row">
								<view>全新正品</view>
								<view class="line"></view>
								<view>精选好物</view>
								<view class="line"></view>
								<view>急速发货</view>
							</view>
						</view>
						<!-- <view style="text-align: center;" @click="$.to('/pages/mall/sort')">
							<view class="all">ALL</view>
							<view>分类</view>
						</view> -->
					</view>

					<view class="saixuan" v-if="saixuanShow">
						<view class="mybi">我的幸运币 <text>{{bi}}</text></view>
						<view class="nav">
							<u-tabs :list="goods_navlist" bg-color="" active-color="#01E0DB" inactive-color="#698286"
								:is-scroll="true" :current="current" @change="change"></u-tabs>
						</view>
					</view>

				</view>

			</view>
		</u-navbar>

		<view class="banner">
			<u-swiper height="300" :list="bannerlist"></u-swiper>

		</view>

		<view class="menu n-flex-row n-wrap">
			<view class="list" v-for="(item,idx) in navList" :key="idx"
				@click="$.to('/pages/mall/list?id='+item.id+'&name='+item.title)">
				<image :src="item.image" mode=""></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		
		<image :src="diPic" class="dipic" mode="widthFix"></image>

		<view class="goodsList">
			<view class="list" v-for="(item,idx) in goodsList" :key="idx" @click="details(item.id)">
				<view>
					<image :src="item.image" mode=""></image>
				</view>
				<view class="info">
					<view class="tit">
						{{item.title}}
					</view>
					<view class="price">￥<text style="font-size: 34rpx;">{{item.price}}</text></view>
					<view class="bi">
						{{item.integral}}幸运币
					</view>
				</view>
			</view>
		</view>
	<u-tabbar v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import {tabbar} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				current : 1,
				tabbar :tabbar,
				background: {

					background: "url(" + require('@/static/image/vo.webp') + ") no-repeat",
					backgroundSize: 'cover',

				},
				goods_navlist: [{
					name: '综合',
					value:'all',
					key:'id',
				}, {
					name: '价格升序',
					value:'asc',
					key:'price',
				}, {
					name: '价格降序',
					value:'desc',
					key:'price',
				}],
				goods_tj:'',
				goods_tj2:'',
				current: 0,
				bannerlist: [],
				saixuanShow: false,
				height: '67',
				goodsList: [],
				page: 1,
				navList: [],
				bi: '',
				diPic:'',
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 300) {
				this.height = '145'
				this.saixuanShow = true
			} else {
				this.height = '67'
				this.saixuanShow = false
			}
		},
		// 触底
		onReachBottom() {
			if (this.goodsList.length < this.page * 10) {
				return
			}
			this.page++;
			this.getGoods()
		},
		onLoad() {
			this.getBanner()
			this.getNav()
			this.goods_tj = this.goods_navlist[0].value;
			this.goods_tj2 = this.goods_navlist[0].key;
			this.getGoods()
		},
		onShow() {
			this.getBi()
		},
		methods: {
			getBanner() {
				this.$http({
					url: "api/common/get_advert",
					data:{type:3}
				}).then(res => {
					console.log(res,"轮播");
					if (res.data.code == 1) {
						this.bannerlist = res.data.data
					}
					this.getZhongButu();
				}).catch(err => {});
			},
			//获取中部图片
			getZhongButu() {
				this.$http({
					url: "api/common/get_advert",
					data:{type:4}
				}).then(res => {
					if (res.data.code == 1) {
						let pic
						res.data.data.forEach((item, index)  => {
								pic = item.image
								return
						})
						this.diPic = pic
					}
				}).catch(err => {});
			},
			getNav() {
				this.$http({
					url: "api/common/get_goods_menu",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.navList = res.data.data
					}
				}).catch(err => {});
			},
			getGoods() {
				this.$http({
					url: "api/common/get_goods_list",
					data: {
						p: this.page,
						goods_tj:this.goods_tj,
						goods_tj2:this.goods_tj2,
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						var data = res.data.data
						this.goodsList = this.goodsList.concat(data);
					}
				}).catch(err => {});
			},
			// 获取西瓜币
			getBi() {
				this.bi = uni.getStorageSync('user').integral
			},
			change(idx) {
				this.current = idx;
				this.goods_tj = this.goods_navlist[idx].value;
				this.goods_tj2 = this.goods_navlist[idx].key;
				this.page = 1;
				this.goodsList = [];
				this.getGoods();
				// alert(this.goods_navlist[idx].value)
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/mall/goodsInfo?id=' + id
				})
			},
		}
	}
</script>

<style>
	@import url("../../common/css/mall.css");
</style>
